<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'"
    />
    <style>
      html {
        min-height: 50rem;
        min-width: 35rem;
        background: white;
      }

      .navbar-nav .nav-link {
        padding: 0.1rem 0.1rem;
        line-height: 0.8rem;
        font-size: 0.9rem;
        margin: 0%;
        border: 0%;
      }
      /* 按钮去掉点击时候出现的边框 */
      .btn:focus {
        box-shadow: none !important;
      }
      textarea:focus {
        box-shadow: none !important;
      }
    </style>
    <link rel="stylesheet" href="static/css/bootstrap.css" />

    <script src="static/js/jquery-3.5.1.js"></script>
    <!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
    <script src="static/js/bootstrap/bootstrap.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="/index.html" draggable="false">常用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/decode.html" draggable="false">编码</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="/convert.html" draggable="false">转换</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/crypto.html" draggable="false">加密</a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" href="/setting.html" draggable="false">设置</a>
          </li> -->
        </ul>
      </div>
    </nav>
    <div
      class="card"
      style="margin-top: 2.7rem; margin-left: 0.4rem; margin-right: 0.4rem"
    >
      <div class="card-header" style="padding: 0.2rem; padding-left: 0.4rem">
        <span class="badge badge-primary">Base64转文件</span>
      </div>
      <div
        class="card-body"
        style="padding: 0%; padding-left: 0.2rem; padding-top: 0.3rem"
      >
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-10"
              style="padding-right: 0.2rem; padding-left: 0rem; margin: 0"
            >
              <div class="input-group mb-3">
                <textarea
                  id="base64Input"
                  class="form-control"
                  rows="10"
                  placeholder="请输入Base64编码"
                ></textarea>
              </div>
            </div>
            <div class="col-2" style="padding: 0rem; margin: 0%">
              <div class="container-fluid">
                <div class="row">
                  <button
                    class="btn btn-success"
                    id="downloadButton"
                    style="font-size: 0.8rem; margin-top: 0.4rem; width: 5.3rem"
                  >
                    文件下载
                  </button>
                </div>
                <div class="row">
                  <button
                    class="btn btn-block btn-info"
                    id="convert-empty"
                    style="
                      /* background-color: #2b91b4; */
                      /* color: #ffffff; */
                      font-size: 0.8rem;
                      margin-top: 0.4rem;
                      width: 5.3rem;
                    "
                  >
                    清空
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12" style="margin-bottom: 0.2rem">
              <div
                class="card"
                id="convert_status"
                style="
                  background-color: #dff0d8;
                  color: #3c763d;
                  padding-left: 1rem;
                  padding-bottom: 0.5rem;
                  padding-top: 0.5rem;
                  font-size: 0.7rem;
                  display: none;
                "
              >
                // 不显示 请在上方文本框中输入Base64编码。
              </div>
              <!-- <hr /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <div
      class="card"
      style="margin-top: 0.4rem; margin-left: 0.5rem; margin-right: 0.5rem"
    >
      <div class="card-header" style="padding: 0.2rem; padding-left: 0.4rem">
        <span class="badge badge-primary">进制转换</span>
      </div>
      <div class="card-body" style="padding: 0%; margin: 0%">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div style="margin-top: 0.3rem">
                <span class="badge badge-secondary">输入：</span>
                <label class="radio-inline">
                  <input type="radio" id="binaryRadio" name="numberSystem" value="2" >
                  二进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio" name="numberSystem" value="8">
                  八进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio" name="numberSystem" value="10" checked>
                  十进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio" name="numberSystem" value="16">
                  十六进制
                </label>
                <select class="form-select" id="numberSelect">
                  <option value="2">二进制</option>
                  <option value="8">八进制</option>
                  <option value="10" selected>十进制</option>
                  <option value="16">十六进制</option>
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <div>
                  <textarea
                    id="convert_input"
                    class="form-control"
                    rows="1"
                    placeholder="请输入数字"
                  ></textarea>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-12">
              <div style="margin-top: 0.3rem">
                <span class="badge badge-secondary">输出：</span>
                <label class="radio-inline">
                  <input type="radio" id="binaryRadio2" name="numberSystem2" value="2" >
                  二进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio2" name="numberSystem2" value="8">
                  八进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio2" name="numberSystem2" value="10" checked>
                  十进制
                </label>
                <label class="radio-inline">
                  <input type="radio" id="hexRadio2" name="numberSystem2" value="16">
                  十六进制
                </label>
                <select class="form-select" id="numberSelect2">
                  <option value="2">二进制</option>
                  <option value="8">八进制</option>
                  <option value="10" selected>十进制</option>
                  <option value="16">十六进制</option>
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <div>
                  <textarea
                    id="convert_output"
                    class="form-control"
                    rows="1"
                    placeholder="输出"
                  ></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="static/js/lib/convert.js"></script>
</html>
